概念
浏览器是通过判断优先级，来决定到底哪些属性值是与元素最相关的，从而应用到该元素上。优先级是由选择器组成的匹配规则决定的。
如何计算?
优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个对应相应匹配表达式的权重值.
如果优先级相同,元素最终会应用 CSS 中靠后的声明.
注意: 在文档树中的距离是不会对元素优先级计算产生影响的.（可以看文档中无视DOM树中的距离的例子）
优先级顺序
下列是一份优先级逐级增加的选择器列表:
- 通用选择器
* - 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID 选择器
- 内联样式
事实上，元素还可以从父元素上继承一些样式，如color等属性。这些继承的样式的优先级永远低于元素本身的样式，包括通用选择器：
<div id='test'>
<a href="#">text</a>
</div>
* {
color:red;
}
#test{
color:blue;
}
最终text的颜色是红色的。
!important 规则是例外
当!important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪个位置. 尽管如此, !important规则还是与优先级毫无关系使用!important不是一个好习惯，因为它改变了你样式表本来的级联规则，从而难以调试。
一些不成文规则
-
不要在全站范围的css中使用
!important. -
只在需要覆盖全站范围的css或是外部css（例如引用的ExtJs或是YUI）的时候才在指定的页面上使用
!important。 -
不要在你的插件中使用
!important。 -
永远都要优先考虑使用样式规则的优先级来解决问题而不是
!important。
取而代之，你可以:
更好的利用CSS的级联属性
更多的使用适合的选择器。比如在你需要选定的对象元素前加上更多的元素，使选择的范围缩小，你的选择器就变得更有针对性，从而提高优先级：
<div id="test">
<span>Text</span>
</div>
div#test span { color: green }
span { color: red }
div span { color: blue }
无论你css语句的顺序是什么样的，文本都会是绿色的(green)因为这一条规则是最有特殊性、优先级最高的。（同理，无论语句顺序怎样，蓝色(blue)的规则都会覆盖红色(red)的规则）
什么时候应该使用：
A) 一种情况
你的网站上有一个设定了全站样式的CSS文件，同时你（或是你同事）写了一些效果通常都是很差的行内样式（行内样式的优先级是最高的）。
在这种情况下，你就可以在你全局的CSS文件中写一些!important的样式来覆盖掉那些直接写在元素上的行内样式。
活生生的例子比如：有人在jQuery插件里写了糟糕的行内样式。
B) 另一种情况
#someElement p {
color: blue;
}
p.awesome {
color: red;
}
在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，如果不使用!important，第一条规则永远比第二条的优先级更高。
怎样覆盖掉 !important
很简单，你只需要再加一条 !important 的CSS语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、class或id选择器）上；或是保持选择器一样，但添加的位置需要在原有声明的后面（优先级相同的情况下，后边定义的会覆盖前边定义的）。
<div>
<a href="#" id="test">text</a>
</div>
想要把原有的绿色文本变成红色，提升优先级的方式:
#test.a{
color: red !important;<!--尽管这条声明在前，但是仍会覆盖下边的样式-->
}
a{
color: green !important;
}
不过
a{
color: green !important;
}
a{
color: red !important;<!--同样的选择器，后边的声明会覆盖前边的-->
}
更多关于important的帖子:
http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css
http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean
http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css
http://stackoverflow.com/questions/11178673/how-to-override-important
:not伪类例外
:not 否定伪类在优先级计算中不会被看作是伪类. 尽管如此, 在计算选择器数量时还是会把伪类当做普通选择器进行计数.
这是一块CSS代码:
div.outer p {
color:orange;
}
div:not(.outer) p {
color: lime;
}
当它被应用在下面的HTML时:
<div class="outer">
<p>This is in the outer div.</p>
<div class="inner">
<p>This text is in the inner div.</p>
</div>
</div>
会在屏幕上出现以下结果:
This is in the outer div. (orange)
This text is in the inner div. (lime)
基于类型的优先级
优先级是根据选择器类型进行计算的. 在下面的例子中,属性选择器尽管选择了一个ID但是在优先级计算法则中还是根据其类型计算 .
有如下样式声明:
* #foo {
color: green;
}
*[id="foo"] {
color: purple;
}
将其应用在下面的HTML中:
<p id="foo">I am a sample text.</p>最终会出现下面的效果:
I am a sample text. (green)
因为即使选择的是相同的元素,但是 ID 选择器有更高优先级,所以第一条样式声明生效.
无视DOM树中的距离
有如下样式声明:
body h1 {
color: green;
}
html h1 {
color: purple;
}
当它应用在下面的HTML时:
<html>
<body>
<h1>Here is a title!</h1>
</body>
</html>
浏览器会将它渲染成:
Here is a title! (purple)
相关
- CSS3 Selectors Specificity - http://www.w3.org/TR/selectors/#specificity
- CSS Key Concepts: CSS syntax, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, used and actual values. Definitions of value syntax, shorthand properties and replaced elements.
via MDN
by sleepholic, alimon
under CC-BY-SA 2.5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。